<template>
  <div id="testTools" class="test-tools" style="height: 100%;">
    <!--预留左侧的框架盒子-->
    <div class="contentBox" style="width: 30%;padding: 20px 16px 20px 20px">
      <service-list  @serviceCall="serviceCall"/>
    </div>
    <div class="contentBox" style="width: 70%;padding: 20px 20px 20px 0">
      <common-content  style="height: 100%;width: 100%" v-if="CommonContentShow" :zySid="zySid" :zyDataList="zyDataList" @doDataShow="doDataShow"/>
    </div>

    <!--详情的弹窗-->
    <el-dialog :title="interfaceTitle" :visible.sync="interfaceDetailDialog" :width="'90%'" :modal-append-to-body='false'>
      <interface-details v-if="isDetail" :node="node"/>
    </el-dialog>

    <!--配置的弹窗-->
    <el-dialog width="90%" title="接口测试" :visible.sync="configureOut" top="50px">
      <div class="body" id="interfaceRight">
        <interface-config ref="interfaceConfig" :is-assert="false" v-if="isNode" :node="node" />
        <!-- 测试结果 -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doTest" size="mini">测试</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import CommonContent from '@/rdComponent/common/testTools.vue';
  import InterfaceConfig from '@/rdComponent/common/InterfaceConfig.vue';
  import InterfaceDetails from '@/rdComponent/common/InterfaceDetails.vue';
  import ServiceList from '@/rdComponent/common/ServiceList.vue';

  export default {
    components:{
      CommonContent, InterfaceConfig, InterfaceDetails, ServiceList
    },
    data() {
      return {
        node: {},
        isNode: true,
        interfaceTitle: "",
        isDetail: true,
        interfaceDetailDialog: false,
        zyDataList: [
          {
            name: "配置",
            isIcon: true,
            iconName: "el-icon-edit-outline",
            btnIndex: 1,
          },
          {
            name: "查看",
            isIcon: true,
            iconName: "el-icon-document",
            btnIndex: 2,
          }
        ],

        /*弹窗的控制*/
        configureOut: false,
        configureOutData: {},
        configureIn: false,

        /*传入的sid*/
        zySid: "",
        /*刷新组件*/
        CommonContentShow: true,
      }
    },
    mounted() {
    },
    methods: {
      serviceCall (id) {
        /*根据实例id查询对应的实例出来*/
        this.zySid = id;
        this.CommonContentShow =  false;
        this.$nextTick(()=>{
          this.CommonContentShow = true;
        })
      },
      doDataShow(backData){
        switch (backData.fn) {
          case 1:
            /*配置的操作*/
            this.configureOut = true;
            this.configureOutData = backData.data;
            this.node = backData.data;
            this.isNode = false;
            this.$nextTick(() => {
              this.isNode = true;
              this.configureOut = true;
            });
            break;
          case 2:
            /*查看的操作*/
            this.node = backData.data;
            this.interfaceTitle = backData.data.siaName;
            this.isDetail = false;
            this.$nextTick(() => {
              this.isDetail = true;
              this.interfaceDetailDialog = true;
            });
            break;
          default:
            break
        }
      },

      /*进行测试结果的展示*/
      doTest(){
        //1.获取inHeader、inQuery
        let paramsJson = this.$refs.interfaceConfig.getParamsJson();
        //2.获取inBody
        let interfaceJson = this.$refs.interfaceConfig.getInterfaceJson();
        //3.获取断言 条件
        let assert = this.$refs.interfaceConfig.getAssert();
        //4.获取数据的对应的一些参数配置项
        let data = {
          inBody: JSON.stringify(interfaceJson),
          inHeader: JSON.stringify(paramsJson.inHeader),
          inQuery: JSON.stringify(paramsJson.inQuery),
          interfaceId: this.node.siaId,
          interfaceName: this.node.siaName,
          requestMethod: this.node.siaHttpMethod,
          requestUrl: this.node.siIpAddress + ":" + this.node.siPort + this.node.siaPath,
          assertConditions: [
            {
              conditions: JSON.stringify(assert),
            }
          ]
        };

        this.$refs.interfaceConfig.clickTest(data);
      },
    }
  }
</script>

<style>
  .el-dialog__header {
    height: 34px;
    line-height: 34px;
    padding: 0 0 0 20px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
</style>
<style scoped lang="less">
  #testTools{
    font-size: 0;
    overflow-x: hidden;
    background-color: #e2eaed;
  }
  #testTools .contentBox{
    display: inline-block;
    /*padding: 10px;*/
    height: 100%;
    box-sizing: border-box;
    vertical-align: top;
    overflow-x: hidden;
  }

  .body{
    height: calc(800px - 58px);
    overflow-y: auto;
    padding: 0 15px;
    box-sizing: border-box;
  }
</style>
